<template>
  <view class="container" :style="pageStyle">
    <uni-nav-bar backgroundColor="transparent" color="#ffffff" left-icon="back" :border="false" :statusBar="true" fixed title="进入店铺" @clickLeft="$goBack"></uni-nav-bar>
    <view class="container_top flex items-center justify-between">
      <image class="top_img" :src="item.shopLogo" mode="widthFix"></image>
      <label>{{ item.shopName }}</label>
      <div class="top_right flex items-center justify-center" @click="gopromotion(1)">
        <uni-icons type="paperplane" size="24" color="#E19F56"></uni-icons>
        <text>推广店铺</text>
      </div>
    </view>
    <view class="container_content border-box">
      <view class="shop_data">
        <view class="title">店铺数据</view>
        <view class="flex items-center justify-between">
          <view class="shop_data_box">
            <view @click="gototalAward">
              <label>累计奖励(元)</label>
              <text>{{ SalesMainItem.cumulative }}</text>
            </view>
            <view @click="gounliquidated">
              <label>未结算奖励(元)</label>
              <text>{{ SalesMainItem.unsettled }}</text>
            </view>
          </view>
          <view class="shop_data_box">
            <view @click="gototalClient">
              <label>累计客户(人）</label>
              <text>{{ SalesMainItem.users }}</text>
            </view>
            <view @click="gototalPersonnel">
              <label>累计分销员(人）</label>
              <text>{{ SalesMainItem.distributors }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom border-box flex justify-around items-center">
        <view class="flex flex-column items-center text-center" style="flex: 1" @click="storeindex">
          <u-icon name="bag" color="#141414" size="50"></u-icon>
          <text>推广商品</text>
        </view>
        <view class="flex flex-column items-center text-center" style="flex: 1" @click="godistributionOrder">
          <u-icon name="file-text" color="#141414" size="50"></u-icon>
          <text>分销订单</text>
        </view>
        <view class="flex flex-column items-center text-center" style="flex: 1" @click="gopromotion(2)">
          <u-icon name="man-add" color="#141414" size="50"></u-icon>
          <text>邀请下级</text>
        </view>
      </view>
    </view>

    <!-- 下面是旧的顶部店铺数据，因为不确定是否有用，先注释 -->
    <!-- <view class="salesIndex-topBackImg">
      <view class="topStoreTag flex-row-plus">
        <view class="storeName overflow font-color-FFF">
          <image class="storeLogoImg" :src="item.shopLogo"></image>
          <label class="fs24">{{ item.shopName }}</label>
        </view>
      </view>
      <view class="flex-items flex-column">
        <image class="salesHeadImg" :src="SalesMainItem.headImage"></image>
        <view class="fs36 mar-top-10">{{ SalesMainItem.name }}</view>
        <view class="gradeText">{{ item.levelName }}</view>
      </view>
    </view> -->
  </view>
</template>

<script setup>
import { ref, computed, inject } from "vue";
import { request } from "@/utils/request";
import API from "@/config/api";
import { onLoad } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";

const $goBack = inject("$goBack");

const item = ref({});
const SalesMainItem = ref({}); // 页面信息数据

const pageStyle = computed(() => ({
  height: "100%",
  overflowY: "hidden",
  // backgroundColor: "#F5F3F1",
  backgroundColor: "#2F231A",
  backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/circle-category/fenxiao_shop.png)`,
  backgroundSize: "100% auto",
  backgroundRepeat: "no-repeat",
}));

onLoad(options => {
  item.value = JSON.parse(options.distributeInfo);
  uni.setStorageSync("salesId", item.distributorId);
  getSalesMainInfo();
});
/**
 * 获取页面信息数据
 * @returns {Promise<void>}
 */
const getSalesMainInfo = async () => {
  try {
    const res = await request(
        API.QuerySalesMainInfo,
        {
          distributorId: item.value.distributorId,
          shopId: item.value.shopId,
        },
        "GET"
    );
    uni.hideLoading();
    SalesMainItem.value = res.data;
  } catch (err) {
    uni.hideLoading();
  }
};

/**
 * 跳转累计奖励
 */
const gototalAward = () => {
  uni.navigateTo({
    url: "totalAward?shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId,
  });
};

/**
 * 跳转未结算奖励
 */
const gounliquidated = () => {
  uni.navigateTo({
    url: "unliquidated?shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId,
  });
};

/**
 * 跳转累计客户
 */
const gototalClient = () => {
  uni.navigateTo({
    url: "totalClient?shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId,
  });
};

/**
 * 跳转累计分销员
 */
const gototalPersonnel = () => {
  uni.navigateTo({
    url: "totalPersonnel?shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId,
  });
};

/**
 * 推广店铺
 * @param promoteType 推广店铺 1 | 邀请下级 2
 */
const promoteLoading = ref(false)
const gopromotion = async promoteType => {
  // #ifdef APP-PLUS
  var system = 1;
  // #endif

  // #ifdef H5
  var system = 3;
  // #endif

  // #ifdef MP-WEIXIN
  var system = 2;
  // #endif

  // #ifdef MP-ALIPAY
  var system = 4;
  // #endif

  /* const res = {'data':'https://cereshop.oss-cn-shenzhen.aliyuncs.com/test/2021-06-10/64223b9f0eef41abbb5d4056b9a40e2a08441534-3cbe-47af-8134-fc74635e069f.png'}
  uni.hideLoading()
  uni.navigateTo({
    url: `../../zwx_category_page1/distributionModule/shareProduct?shareImg=${res.data}&shopId=${this.item.shopId}`
  }); */
  try {
    uni.setStorageSync("shareItem", {
      title: item.value.shopName,
      image: item.value.shopLogo,
    })
    uni.navigateTo({
      url: `/zwx_category_page1/distributionModule/shareProduct?shareType=1&type=${promoteType}&terminal=${system}&shopId=${item.value.shopId}&salesId=${item.value.distributorId}`,
    });
  } catch (err) {
    promoteLoading.value = false
    uni.hideLoading();
  }
};

/**
 * 跳转推广商品
 */
const storeindex = () => {
  uni.navigateTo({
    url: "commodity?shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId + "&headimg=" + SalesMainItem.value.headImage + "&username=" + SalesMainItem.value.name,
  });
};
/**
 * 跳转分销订单
 */
const godistributionOrder = () => {
  uni.navigateTo({
    url: `distributionOrder?shopId=${item.value.shopId}&distributorId=${item.value.distributorId}`,
  });
};
/**
 * 邀请下级
 */
const goinvite = () => {
  uni.navigateTo({
    url: "invite?tenantCode=" + JSON.stringify(SalesMainItem.value) + "&shopId=" + item.value.shopId + "&distributorId=" + item.value.distributorId,
  });
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f3f1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .salesIndex-topBackImg {
    width: 100%;
    padding-top: 10upx;
    position: relative;
    .topStoreTag {
      background: linear-gradient(90deg, #ff9000, #ff5000);
      height: 50upx;
      width: 180upx;
      border-radius: 20rpx 0 0 20rpx;
      position: absolute;
      right: 0;
      top: 50rpx;
      .storeName {
        height: 50upx;
        display: flex;
        align-items: center;
        margin-left: 5rpx;
      }
      .storeLogoImg {
        width: 40upx;
        height: 40upx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }

    .salesHeadImg {
      width: 100upx;
      height: 100upx;
      border-radius: 50%;
      border: 10rpx solid #ff5000;
    }

    .gradeText {
      font-size: 26rpx;
      color: #ffffff;
      font-weight: 400;
      line-height: 36rpx;
      text-align: center;
      margin-top: 15upx;
      padding: 5upx 10upx;
      opacity: 0.7;
    }
  }
  .awardTopInfo {
    .award-box {
      height: 158upx;
      width: 690upx;
      margin-top: 30upx;
      .award {
        color: #fff;
        width: 222rpx;
        height: 78rpx;
        line-height: 78rpx;
        border-radius: 78rpx;
        background: linear-gradient(90deg, #ff9000, #ff5000);
        text-align: center;
        margin-bottom: 28rpx;
      }
      .salesIcon {
        width: 60upx;
        height: 56upx;
      }
    }
  }
  .awardInfo {
    .award-box {
      height: 158upx;
      width: 690upx;
      margin-top: 30upx;
      background: #ffffff;
      .salesIcon {
        width: 60upx;
        height: 56upx;
      }
    }
  }
  .btnList {
    display: flex;
    width: 100%;
    margin-top: 30upx;
    flex-flow: wrap;
    justify-content: center;
    .btnListBox {
      background: #ffffff;
      height: 196upx;
      width: 690upx;
    }
    .salesIcon {
      width: 90rpx;
      height: 90rpx;
    }
  }
}

::v-deep .uni-nav-bar-text {
  font-family: Source Han Sans CN VF;
  font-weight: 500;
  font-size: 38rpx;
  color: #fff;
}

.container_top {
  padding: 25rpx 40rpx;
  .top_img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 19rpx;
  }
  label {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 36rpx;
    flex: 1;
  }
  .top_right {
    width: 192rpx;
    height: 56rpx;
    background: linear-gradient(270deg, #fae8d5, #e6c5a1);
    border-radius: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #281f17;
    line-height: 36rpx;
    margin-left: 9rpx;
  }
}

.container_content {
  width: 100%;
  background: #f5f3f1;
  border-radius: 40rpx 40rpx 0 0;
  flex: 1;
  padding: 30rpx;
  .shop_data {
    height: 360rpx;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 33rpx 25rpx 28rpx;
    .title {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #141414;
      line-height: 1;
      margin-bottom: 21rpx;
    }
    .shop_data_box {
      width: 308rpx;
      height: 249rpx;
      background: #f7f6f9;
      border-radius: 12rpx;
      padding-left: 32rpx;
      padding-top: 31rpx;
      box-sizing: border-box;
      view {
        margin-bottom: 41rpx;
        label {
          display: block;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24rpx;
          color: #6b6b6b;
          line-height: 1;
          margin-bottom: 17rpx;
        }
        text {
          display: block;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 36rpx;
          color: #141414;
          line-height: 1;
        }
      }
    }
  }
  .bottom {
    width: 690rpx;
    height: 156rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 24rpx auto;
    text {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 26rpx;
      color: #3a3a3a;
      line-height: 1;
      margin-top: 23rpx;
      display: block;
    }
  }
}
</style>
